<template>
  <div class="father">
    <h3>父组件</h3>
    <h4 v-show="toy">子组件给我的玩具 {{ toy }}</h4>
    <!-- 为子组件child绑定自定义事件 -->
    <Child @send-toy="getToy" @test="test" />
  </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from "vue";
import Child from "./Child.vue";

let toy = ref("");

// 将事件回调留在父组件中(用于获取数据)
function getToy(value: string) {
  toy.value = value;
}
function test(){
	console.log('test')
}
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
.father button {
  margin-right: 5px;
}
</style>
